<template>
  <div>
    <Button type="primary" @click="add">添加污染物</Button>
    <Table :columns="columns" :data="data"></Table>
  </div>
</template>
<script>
export default {
  methods: {
    add() {
      this.data.push({
        name: "新增污染物",
        value: 0.1,
      });
    },
  },
  data() {
    return {
      columns: [
        {
          title: "污染物名称",
          key: "name",
          render: (h, params) => {
            let row = params.row;
            return h("Input", {
              props: {
                value: row.name,
              },
              on: {
                "on-change": (e) => {
                  row.name = e.target.value;
                },
              },
            });
          },
        },
        {
          title: "污染物浓度",
          key: "value",
          render: (h, params) => {
            let row = params.row;
            return h("Input", {
              props: {
                value: row.value,
                type:"number"
              },
              on: {
                "on-change": (e) => {
                  row.value = e.target.value;
                },
              },
            });
          },
        }
      ],
      data: [
        {
          name: "锑",
          value: 0.1
        },
        {
          name: "丙酮",
          value: 0.2
        },
      ],
    };
  },
};
</script>